<template>
    <require from="./em-blog-list.css"></require>
    <!-- <div class="em-blog-list" if.bind="blogs.length > 0"> -->
    <div class="em-blog-list">
        <div class="ui dividing header">博文列表（${blogSize}）</div>
        <div class="ui fluid right action left icon input">
            <input ref="searchInputRef" type="text" value.bind="search" keyup.trigger="keyupHandler($event)"
                blur.trigger="searchBlurHandler()" focus.trigger="searchFocusHandler()" placeholder="博文搜索...">
            <!-- <i class="search icon"></i> -->
            <i class="${(ajax && ajax.readyState != 4) ? 'spinner loading' : 'search'} icon"></i>
            <i ref="searchRemoveRef" click.delegate="clearSearchHandler()" class="remove link icon"></i>
            <div ref="ddSearchRef" class="ui basic selection floating dropdown button">
                <div class="text" title="切换搜索方式">全文</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item" data-value="">全文</div>
                    <div class="item" data-value="title:">标题</div>
                    <div class="item" data-value="content:">内容</div>
                </div>
            </div>
        </div>
        <div class="ui middle aligned selection list">
            <div repeat.for="dir of blogTree | sortBlog:'name'" class="item">
                <i class="angle ${dir.open ? 'down' : 'right'} link icon" click.delegate="dirToggleHandler(dir)"></i>
                <div class="content">
                    <div class="ellipsis header" style="font-weight: normal;">${dir.name}</div>
                    <div class="list" show.bind="dir._open">
                        <div repeat.for="blog of dir.blogs | sortBlog" class="item ${blog.id == id ? 'active' : ''}">
                            <i if.bind="!blog.hasChild" class="file outline icon"></i>
                            <i if.bind="blog.hasChild" click.delegate="loadChildBlogs(blog)"
                                class="${blog._open ? 'minus' : 'plus'} square outline icon"></i>
                            <div class="content">
                                <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${blog.id}"
                                    title="${blog.title}">${blog.title}</a>
                            </div>
                            <div class="list" show.bind="blog._open">
                                <div repeat.for="child of blog._childs | sortBlog"
                                    class="item ${child.id == id ? 'active' : ''}">
                                    <i if.bind="!child.hasChild" class="file outline icon"></i>
                                    <i if.bind="child.hasChild" click.delegate="loadChildBlogs(child)"
                                        class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
                                    <div class="content">
                                        <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${child.id}"
                                            title="${child.title}">${child.title}</a>
                                    </div>
                                    <div class="list" show.bind="child._open">
                                        <div repeat.for="child2 of child._childs | sortBlog"
                                            class="item ${child2.id == id ? 'active' : ''}">
                                            <i if.bind="!child2.hasChild" class="file outline icon"></i>
                                            <i if.bind="child2.hasChild" click.delegate="loadChildBlogs(child2)"
                                                class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
                                            <div class="content">
                                                <a class="ellipsis header"
                                                    href="#/${sid ? sid + '/' : ''}blog/${child2.id}"
                                                    title="${child2.title}">${child2.title}</a>
                                            </div>
                                            <div class="list" show.bind="child2._open">
                                                <div repeat.for="child3 of child2._childs | sortBlog"
                                                    class="item ${child3.id == id ? 'active' : ''}">
                                                    <i if.bind="!child3.hasChild" class="file outline icon"></i>
                                                    <i if.bind="child3.hasChild" click.delegate="loadChildBlogs(child3)"
                                                        class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
                                                    <div class="content">
                                                        <a class="ellipsis header"
                                                            href="#/${sid ? sid + '/' : ''}blog/${child3.id}"
                                                            title="${child3.title}">${child3.title}</a>
                                                    </div>
                                                    <div class="list" show.bind="child3._open">
                                                        <div repeat.for="child4 of child3._childs | sortBlog"
                                                            class="item ${child4.id == id ? 'active' : ''}">
                                                            <i if.bind="!child4.hasChild" class="file outline icon"></i>
                                                            <i if.bind="child4.hasChild"
                                                                click.delegate="loadChildBlogs(child4)"
                                                                class="${child4._open ? 'minus' : 'plus'} square outline icon"></i>
                                                            <div class="content">
                                                                <a class="ellipsis header"
                                                                    href="#/${sid ? sid + '/' : ''}blog/${child4.id}"
                                                                    title="${child4.title}">${child4.title}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui middle aligned selection list">
            <div repeat.for="item of topBlogs | sortBlog" class="item ${item.id == id ? 'active' : ''}">
                <i if.bind="!item.hasChild" class="file outline icon"></i>
                <i if.bind="item.hasChild" click.delegate="loadChildBlogs(item)"
                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                <div class="content">
                    <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${item.id}"
                        title="${item.title}">${item.title}</a>
                </div>
                <div class="list" show.bind="item._open" data-open="${item._open}">
                    <div repeat.for="child of item._childs | sortBlog" class="item ${child.id == id ? 'active' : ''}">
                        <i if.bind="!child.hasChild" class="file outline icon"></i>
                        <i if.bind="child.hasChild" click.delegate="loadChildBlogs(child)"
                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
                        <div class="content">
                            <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${child.id}"
                                title="${child.title}">${child.title}</a>
                        </div>
                        <div class="list" show.bind="child._open">
                            <div repeat.for="child2 of child._childs | sortBlog"
                                class="item ${child2.id == id ? 'active' : ''}">
                                <i if.bind="!child2.hasChild" class="file outline icon"></i>
                                <i if.bind="child2.hasChild" click.delegate="loadChildBlogs(child2)"
                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
                                <div class="content">
                                    <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${child2.id}"
                                        title="${child2.title}">${child2.title}</a>
                                </div>
                                <div class="list" show.bind="child2._open">
                                    <div repeat.for="child3 of child2._childs | sortBlog"
                                        class="item ${child3.id == id ? 'active' : ''}">
                                        <i if.bind="!child3.hasChild" class="file outline icon"></i>
                                        <i if.bind="child3.hasChild" click.delegate="loadChildBlogs(child3)"
                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
                                        <div class="content">
                                            <a class="ellipsis header" href="#/${sid ? sid + '/' : ''}blog/${child3.id}"
                                                title="${child3.title}">${child3.title}</a>
                                        </div>
                                        <div class="list" show.bind="child3._open">
                                            <div repeat.for="child4 of child3._childs | sortBlog"
                                                class="item ${child4.id == id ? 'active' : ''}">
                                                <i if.bind="!child4.hasChild" class="file outline icon"></i>
                                                <i if.bind="child4.hasChild" click.delegate="loadChildBlogs(child4)"
                                                    class="${child4._open ? 'minus' : 'plus'} square outline icon"></i>
                                                <div class="content">
                                                    <a class="ellipsis header"
                                                        href="#/${sid ? sid + '/' : ''}blog/${child4.id}"
                                                        title="${child4.title}">${child4.title}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div if.bind="!blogPage.last" click.delegate="moreHandler()" class="ui fluid basic button"><i
                show.bind="ajax && ajax.readyState != 4" class="spinner loading icon"></i> 更多 (${blogPage.totalElements
            - (blogPage.size * (blogPage.number + 1))})</div>
    </div>
</template>
